<template>
    <ul class="paginator d-flex justify-content-center align-items-center" v-if="meta.last_page > 1">
        <template v-if="centerStart != 1">
            <li class="paginator-item" :class="{active: 1 == meta.current_page}">
                <a href="javascript:;" @click="change(1)">1</a>
            </li>
            <li class="paginator-item"><a disabled class="text-muted" v-html="'&ctdot;'"></a></li>
        </template>
        <li class="paginator-item" :class="{active: i == meta.current_page}" v-for="i in range(centerStart, centerEnd)"
            :key="i"><a href="javascript:;" @click="change(i)">{{ i }}</a></li>
        <template v-if="centerEnd != meta.last_page">
            <li class="paginator-item"><a disabled class="text-muted" v-html="'&ctdot;'"></a></li>
            <li class="paginator-item" :class="{active: meta.last_page == meta.current_page}">
                <a href="javascript:;" @click="change(meta.last_page)">{{ meta.last_page }}</a>
            </li>
        </template>
    </ul>
</template>

<script>
    export default {
        name: 'paginator',
        props: {
            meta: {
                type: Object,
                default() {
                    return {
                        total: 0,
                        per_page: 10,
                        from: 0,
                        to: 1,
                        last_page: 1,
                        current_page: 1
                    }
                }
            }
        },
        computed: {
            centerStart() {
                if (this.meta.last_page <= 10) {
                    return 1;
                }

                let count =
                    this.meta.last_page - this.meta.current_page <= 4
                        ? 9 - (this.meta.last_page - this.meta.current_page)
                        : 4;

                return this.meta.current_page - count > 1
                    ? this.meta.current_page - count
                    : 1;
            },
            centerEnd() {
                if (this.meta.last_page <= 10) {
                    return this.meta.last_page;
                }

                let count =
                    this.meta.current_page <= 4 ? 9 - (this.meta.current_page - 1) : 4;

                return this.meta.current_page + count < this.meta.last_page - 1
                    ? this.meta.current_page + count
                    : this.meta.last_page;
            }
        },
        methods: {
            range(start, end) {
                return Array(end - start + 1)
                    .fill()
                    .map((_, idx) => start + idx);
            },
            change(page) {
                this.meta.current_page = page;
                this.$emit('change', page);
            }
        }
    }
</script>

<style scoped lang="scss">
    .paginator {
        list-style: none;
        padding: 1em 0;

        .paginator-item {
            a {
                display: inline-block;
                height: 32px;
                width: 32px;
                text-align: center;
                border-radius: 100%;
                line-height: 32px;
                font-size: 14px;
                margin: 0 0.2em;
            }

            &.active a {
                color: #fff;
                background: rgba(0, 0, 0, 0.5);
            }
        }
    }
</style>
